<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="icon" href="../img/favicon.ico">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../layui/css/layui.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/index.css">
    <style>
        html{
            height: 100%;
            overflow-y: hidden;
        }
        body{
            height: 100%;
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div>
    <!--轮播开始-->
    <div style="background-color: #f5f5f5;">
        <div class="layui-carousel" id="test1" style="margin: auto;">
            <div carousel-item>
                <div></div>
            </div>
        </div>
    </div>
    <!--联通精选-->
    <div style="background: #f5f5f5;">
        <div class="main-box ltjxDrop ltjxWarp" data-id="ltjxDrop" modulecode="module_select" sortcode="row_6_1">
            <div class="lx_jx_header" id="jx_box">
                <p class="floor_tit"><span class="editeTxt" i18n="main.rmcx">热门促销</span></p>
                <ul class="lx_jx_sx_ul" style="width: 232px;">
                    <li class="marginL0 editeTxt lx_jx_sx_select" data-class="rqtj-conf" submodulename="人气推荐" title=""
                        contenteditable="false" i18n="main.ydtc">移动套餐
                    </li>
                    <li class="editeTxt marginR0" data-class="tszj-conf" submodulename="特色专区" title=""
                        contenteditable="false" i18n="main.gkdhlw">高宽带互联网
                    </li>
                </ul>
            </div>
            <div class="width100" id="lx_jx_pro_ul">
                <ul class="lx_jx_pro_ul ltjxUlEdite validateArea rqtj-conf ui-droppable lx_jx_pro_ulShow" id="ydtc"></ul>
                <ul class="lx_jx_pro_ul ltjxUlEdite validateArea tszj-conf ui-droppable" data-id="ltjxDroptszq"
                    style="display: none;">
                    <li class="validateElement appendEditDelBut ui-droppable" onclick="gqrh()">
                        <p class="jx_tit editeTxt" i18n="index.gqrh">光纤入户（FTTH）</p>
                        <div class="lx_jx_pro_img_div backimg">
                            <img src="../img/index/liantong4.png" class="lx_jx_pro_img">
                        </div>
                    </li>
                    <li class="validateElement appendEditDelBut ui-droppable" id="goods1">
                        <p class="jx_tit editeTxt">FTTH</p>
                        <div class="lx_jx_pro_img_div backimg">
                            <img src="../img/index/liantong3.png" class="lx_jx_pro_img">
                        </div>
                    </li>
                    <li class="validateElement appendEditDelBut ui-droppable" onclick="hlwcpe()">
                        <p class="jx_tit editeTxt" i18n="index.cpe">互联网CPE</p>
                        <div class="lx_jx_pro_img_div backimg">
                            <img src="../img/index/liantong2.png" class="lx_jx_pro_img">
                        </div>
                    </li>
                    <li class="marginR0  validateElement appendEditDelBut ui-droppable" style="margin-right: 0px;" id="goods2">
                        <p class="jx_tit editeTxt">FTTH Via CPE</p>
                        <div class="lx_jx_pro_img_div backimg">
                            <img src="../img/index/liantong1.png" class="lx_jx_pro_img">
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--流量、宽带专区-->
        <div class="main-box H1042" style="padding-bottom: 50px;">
            <div class="traffic_div fl" id="traffic_div">
                <div class="traffic_div_header">
                    <p class="floor_tit"><span i18n="main.llzq">流量专区</span></p>
                    <div class="floor_tit3_div">
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.swjl">上网记录</span>
                        </div>
                        <i class="floor_tit3_fg">/</i>
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.llxd">流量详单</span>
                        </div>
                        <i class="floor_tit3_fg">/</i>
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.dgjl">订购记录</span>
                        </div>
                    </div>
                    <!--                <div class="more_div fr">-->
                    <!--                    <a href="###"> 更多-->
                    <!--                        <div class="more_icon fr"></div>-->
                    <!--                    </a>-->
                    <!--                </div>-->
                </div>
                <div class="trafficConDiv validateArea ui-droppable" data-id="tymb1">
                    <ul class="traffic_ul1">
                        <li class="validateElement appendEditDelBut ui-droppable" data-id="llzq1">
                            <img src="../img/index/1.jpg" class="traffic_ul1_libg">
                            <img src="../img/index/2.png" class="traffic_ul1_li_bg">
                            <div class="traffic_ul1_li_message_div">
                                <p class="traffic_ul1_li_message1" i18n="main.wodxllb">WO定向流量包</p>
                                <p class="traffic_ul1_li_message2" i18n="main.dxllb">定向视频包</p>
                            </div>
                        </li>
                        <li class="borderNone fr  validateElement appendEditDelBut ui-droppable" data-id="llzq1">
                            <img src="../img/index/3.jpg" class="traffic_ul1_libg">
                            <img src="../img/index/2.png" class="traffic_ul1_li_bg">
                            <div class="traffic_ul1_li_message_div">
                                <p class="traffic_ul1_li_message1" i18n="main.qgllbnb">全国流量半年包</p>
                                <p class="traffic_ul1_li_message2" i18n="main.bnyx">半年有效</p>
                            </div>
                        </li>
                    </ul>
                    <ul class="traffic_ul2" id="liuliangbao"></ul>
                </div>
            </div>
            <div class="broadband_div fr margin-bottom10">
                <div class="broadband_div_header">
                    <p class="floor_tit"><span class="editeTxt" i18n="main.kdzq">宽带专区</span></p>
                    <div class="floor_tit3_div">
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.kdxz">宽带新装</span>
                        </div>
                        <i class="floor_tit3_fg">/</i>
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.kdxf">宽带续费</span>
                        </div>
                        <i class="floor_tit3_fg">/</i>
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.kdcs">宽带测速</span>
                        </div>
                        <i class="floor_tit3_fg">/</i>
                        <div class="editeTxt1">
                            <span class="floorNavTit" i18n="main.kdbz">宽带报障</span>
                        </div>
                    </div>
                    <!--                <div class="more_div fr">-->
                    <!--                    <a href="###"> 更多-->
                    <!--                        <div class="more_icon fr"></div>-->
                    <!--                    </a>-->
                    <!--                </div>-->
                </div>
                <div class="broadbandConDiv validateArea ui-droppable" data-id="kdjcmb1">
                    <div class="broadband_top validateElement appendEditBut">
                        <img src="../img/index/4.jpg" class="kdzq_bg1">
                        <div class="broadband_fc" style="top: 0;">
                            <img src="../img/index/2.png" class="broadband_fc_bg">
                            <ul class="broadband_top_mes" style="top: 44%;left: 0;text-align: center;">
                                <li class="broadband_top_txt1 editeTxt" i18n="main.zxshltzj">智享生活 联通智家</li>
                                <li class="broadband_top_txt2 editeTxt" style="color: #aaaaaa;font-size: 12px;" i18n="main.jshwl">极速好网络，套餐全家享</li>
                            </ul>
                        </div>
                        <img src="../img/index/collect_icon1_zhl.png" class="collect_icon2">
                    </div>
                    <ul class="broadband_ul2" id="kuandai"></ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery/jquery.min.js"></script>
<script src="../js/jquery/jquery.i18n.properties.min.js"></script>
<script src="../js/token.js"></script>
<script src="../js/config.js"></script>
<script src="../js/jquery.i18n.min.js"></script>
<script src="../js/multi_lang_config.js"></script>
<script>
    var layer = layui.layer;
    var form = layui.form;

    var carousel = layui.carousel;

    // 人气推荐和特色专区动画
    $(".lx_jx_sx_ul li").mouseover(function () {
        if (this.dataset.class == 'rqtj-conf') {
            $(".rqtj-conf").show();
            $(this).addClass('lx_jx_sx_select')
            $(this).next().removeClass('lx_jx_sx_select')
            $(".tszj-conf").hide();
        } else if (this.dataset.class == 'tszj-conf') {
            $(".tszj-conf").show();
            $(".rqtj-conf").hide();
            $(this).addClass('lx_jx_sx_select')
            $(this).prev().removeClass('lx_jx_sx_select')
        }
    })

    var moduleName = "main";
    var defaultLang = layui.data('langTab').langType;
    initLangConfig({
        defaultLang:defaultLang,
        filePath: "../js/i18n/"+moduleName+"/",
        module:moduleName,
        base:"../js/"
    })
    var i18np = null;
    function changeLang(lang) {
        defaultLang = lang;
        reloadI18n({
            defaultLang:lang,
            filePath: "../js/i18n/"+moduleName+"/",
            module:moduleName,
        })
        // i18np.loadProperties(moduleName);
    }

    layui.config({base: '../js/'})
        // 继承treetable.js插件
        .extend({i18np: 'i18n'}).use([ 'i18np','jquery'], function () {
        i18np = layui.i18np;
        // i18np.loadProperties(moduleName);
    });

    // 获取轮播图
    $.ajax({
        url: HOST + "webapi/banners/getBanners",
        data: {fenlei: 1},
        success: function (res) {
            if (res.code == 200 && res.data.length > 0) {
                let s = ``;
                for (let i = 0; i < res.data.length; i++) {
                    s += `<div><img
                        src="${res.data[i].images}"
                        alt="">
                    </div>`
                }
                $("#test1>div").html("")
                $("#test1>div").html(s)
                //建造实例
                carousel.render({
                    elem: '#test1'
                    , width: '1400px' //设置容器宽度
                    , arrow: 'always' //始终显示箭头
                    // ,anim: 'updown' //切换动画方式
                });
                $("#test1").css("height", '350px')
            }
        }
    })

    var ydtc = [];
    //移动套餐
    $.ajax({
        url: HOST + "webapi/package/getpackage",
        success: function (res) {
            if (res.code == 200) {
                ydtc = res.data;
                let li = "";
                for (let i = 0; i < res.data.length; i++) {
                    li = li + "<li class=\"validateElement appendEditDelBut ui-droppable\" style='margin-right: 8px;' onclick=\"toYdtc(" + i + ")\">\n" +
                        "                    <p class=\"jx_tit editeTxt\" style=\"margin: 16px auto 10px;\">" + res.data[i].comboNameZh + "</p>\n" +
                        "                    <div class=\"backimg\" style=\"height: 140px;margin: 0 auto;position: relative;\">\n" +
                        "                        <img src=\"" + res.data[i].comboImage + "\" style=\"height: 140px;\">\n" +
                        "                    </div>\n" +
                        "                </li>";
                }
                $("#ydtc").html(li);
            }
        }
    })

    //移动套餐详情
    function toYdtc(i) {
        // console.log("移动套餐ID："+ydtc[i].id);
        location.href = "../detail/mobilePackage.html?id=" + ydtc[i].id;
    }

    let gkdhlwGoods = [];
    //高宽带互联网两个商品
    $.ajax({
        url: HOST + "webapi/goods/getWebsiteGoods?limit=3",
        success: function (res) {
            if (res.code == 200) {
                gkdhlwGoods = res.data;
                if (gkdhlwGoods.length >= 2) {
                    $("#goods1 p").html(res.data[1].nameZh);
                }
                if (gkdhlwGoods.length >= 1) {
                    $("#goods2 p").html(res.data[0].nameZh);
                }
                let li = "";
                for (var i = 0; i < res.data.length; i++) {
                    li = li + "<li class=\"validateElement appendEditBut\" onclick=\"toGoodsDetail(" + i + ")\">\n" +
                        "                        <p class=\"traffic_ul2_message1 editeTxt\">" + res.data[i].nameZh + "</p>\n" +
                        "                        <p class=\"traffic_ul2_message2 editeTxt\">热卖</p>\n" +
                        "                        <div class=\"img_div2 backimg\" style='margin: 0 0'>\n" +
                        "                            <img src=\"" + res.data[i].picture + "\"\n" +
                        "                                 class=\"kdzq_pic\">\n" +
                        "                        </div>\n" +
                        "                    </li>";
                }
                $("#kuandai").html(li);
            }
        }
    })

    function toGoodsDetail(i) {
        location.href = "../single-product.html?gid=" + gkdhlwGoods[i].id;
    }

    $("#goods1").click(function () {
        if (gkdhlwGoods.length >= 2) {
            location.href = "../single-product.html?gid=" + gkdhlwGoods[1].id;
        }
    });
    $("#goods2").click(function () {
        if (gkdhlwGoods.length >= 1) {
            location.href = "../single-product.html?gid=" + gkdhlwGoods[0].id;
        }
    });

    function gqrh() {
        location.href = "../product-detail-ftth.html";
    }

    function hlwcpe() {
        location.href = "../product-detail-hlwCPE.html";
    }

    let llzqCombo = [];
    //流量套餐专区
    $.ajax({
        url: HOST + "webapi/combo/getIndexCombo?limit=3",
        success: function (res) {
            if (res.code == 200) {
                llzqCombo = res.data;
                let li = "";
                for (var i = 0; i < res.data.length; i++) {
                    li = li + "<li class=\"validateElement appendEditDelBut ui-droppable\" onclick=\"toComboDetail(" + i + ")\">\n" +
                        "                        <p class=\"traffic_ul2_message1\">" + res.data[i].comboName + "</p>\n" +
                        "                        <p class=\"traffic_ul2_message2\">" + res.data[i].orderMethod + "</p>\n" +
                        "                        <div class=\"img_div2 backimg\" style='margin: 0 0'>\n" +
                        "                            <img style='width: 200px;height: 200px;' src=\"" + res.data[i].picture + "\" class=\"llb_icon\">\n" +
                        "                        </div>\n" +
                        "                        <div class=\"pro_style\" _bamboo_rep_tag=\"\"></div>\n" +
                        "                    </li>";
                }
                $("#liuliangbao").html(li);
            }
        }
    })

    function toComboDetail(i) {
        // console.log("跳转套餐详情：" + llzqCombo[i].id);
        window.open("../popular-package-detail.html?id="+llzqCombo[i].id);
    }
</script>
</body>
</html>